<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::header(~{::title},~{::link},~{})">
    <title>首页 | GemFrame开源权限管理系统v1.0.0</title>
    <!-- Page CSS -->
    <!--表格-->
    <link rel="stylesheet" href="static/cms/assets/css/tables/datatables.min.css">
    <link rel="stylesheet" href="static/cms/assets/css/tables/buttons.dataTables.min.css">

    <!-- Page CSS -->
    <link rel="stylesheet" type="text/css" href="static/cms/assets/css/tables/jsgrid/demos.css">
    <link rel="stylesheet" type="text/css" href="static/cms/assets/css/tables/jsgrid/jsgrid.css">
    <link rel="stylesheet" type="text/css" href="static/cms/assets/css/tables/jsgrid/theme.css">
    <link rel="stylesheet" type="text/css" href="static/cms/assets/css/tables/jsgrid/jsgridui.css">

    <!--按钮-->
    <link rel="stylesheet" href="static/cms/assets/css/elements/buttons.css">
    <!--表单 -->
    <link rel="stylesheet" href="static/cms/assets/css/iCheck/skins/minimal/minimal.css">
    <link rel="stylesheet" href="static/cms/assets/css/iCheck/custom.css">
    <link rel="stylesheet" href="static/cms/assets/css/iCheck/skins/all.css">
    <link rel="stylesheet" href="static/cms/assets/css/toggle/toggle.css">
    <link rel="stylesheet" href="static/cms/assets/css/daterange/daterangepicker.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/bars-1to10.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/bars-movie.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/bars-square.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/bars-pill.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/bars-reversed.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/bars-horizontal.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/fontawesome-stars.css">
    <link rel="stylesheet" href="static/cms/assets/css/rating/css-stars.css">
    <link rel="stylesheet" href="static/cms/assets/css/tags/jquery.tag-editor.css">

    <div th:replace="common/header::head_links"></div>

    <!--JS加载开始-->
    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script th:src="@{static/cms/assets/js/jquery/slim.min.js}"></script>
    <!-- Popper.JS -->
    <script th:src="@{static/cms/assets/js/jquery/popper.min.js}"></script>
    <!-- Bootstrap JS -->
    <div th:include="common/footer::common_links"></div>

</head>

<body class="sidebar-mini fixed skin-blue">
<div class="wrapper">
    <div th:replace="~{common/topbar::nav}"></div>
    <div th:replace="~{common/lefter::left_sidebar}"></div>

    <!--自定义内容开始-->
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                <small>用户管理</small>
            </h1>
            <!--面包屑页面路径-->
            <ol class="breadcrumb">
                <li><a href="index"><i class="fa fa-dashboard"></i>1</a></li>
                <li><a href="#">2</a></li>
                <li class="active">3</li>
            </ol>
        </section>
         <!--DataTable Section Starts -->
        <div class="card panel panel-default">
            <!--<div class="card-header" id="headingOne">-->
                <!--<div class="panel-heading">-->
                    <!--<h6 class="title-inner text-uppercase">用户管理</h6>-->
                    <!--<ul class="list-inline panel-actions">-->
                        <!--<li class="btn btn-collapse" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">-->
                            <!--<i class="fa fa-minus"></i>-->
                        <!--</li>-->
                        <!--<li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="fa fa-expand"></i></a></li>-->
                        <!--<li><a href="#" data-action="close"><i class="fa fa-times"></i></a></li>-->
                    <!--</ul>-->
                <!--</div>-->
            <!--</div>-->
            <div id="collapseOne" class="collapse show p-4" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="dt-buttons">
                    <button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button">
                        <span>添加</span>
                    </button>
                    <button class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="example" type="button">
                        <span>删除</span>
                    </button>
                </div>
                <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>电子邮箱</th>
                        <th>联系地址</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr  th:each="user,userStat : ${users}">
                        <td th:text="${userStat.index}"></td>
                        <td th:text="${user.username}"></td>
                        <td th:text="${user.realname}"></td>
                        <td th:text="${user.phone}"></td>
                        <td th:text="${user.email}"></td>
                        <td th:text="${user.address}"></td>
                        <td>
                            <i class="fa fa-times-rectangle" aria-hidden="true"></i>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
         <!--DataTable Section Ends-->
    </div>
    <!--自定义内容结束-->

    <!-- Back to Top Starts -->
    <a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
    <!-- Back to Top Ends -->
    <!--底部版权-->
    <div th:replace="~{common/footer::foot}"></div>
</div>

<script>
    // $(function () {//获取id的table
    //     $('#example').DataTable({
    //         "bJQueryUI" : false, //是否使用 jQury的UI theme
    //         "aLengthMenu" : [10,20, 40, 60], //更改显示记录数选项
    //         "oLanguage": { // 语言设置
    //             "sLengthMenu": "每页显示 _MENU_ 条记录",
    //             "sZeroRecords": "抱歉， 没有找到",
    //             "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
    //             "sInfoEmpty": "没有数据",
    //             "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
    //             "sZeroRecords": "没有检索到数据",
    //             "sSearch": "搜索:",
    //             "oPaginate": {
    //                 "sFirst": "首页",
    //                 "sPrevious": "前一页",
    //                 "sNext": "后一页",
    //                 "sLast": "尾页"
    //             }
    //         }
    //     });
    // });
</script>

    <!-- Page JS -->
    <script src="static/cms/assets/js/tables/datatables.min.js"></script>
    <script src="static/cms/assets/js/tables/dataTables.buttons.min.js"></script>
    <script src="static/cms/assets/js/tables/jszip.min.js"></script>
    <script src="static/cms/assets/js/tables/pdfmake.min.js"></script>
    <script src="static/cms/assets/js/tables/vfs_fonts.js"></script>
    <script src="static/cms/assets/js/tables/buttons.html5.min.js"></script>
    <script src="static/cms/assets/js/tables/buttons.print.min.js"></script>
    <script src="static/cms/assets/js/tables/datatable.js"></script>

    <!--表单 -->
    <script src="static/cms/assets/js/iCheck/icheck.js"></script>
    <script src="static/cms/assets/js/iCheck/icheck_custom.js"></script>
    <script src="static/cms/assets/js/toggle/toggle.js"></script>
    <script src="static/cms/assets/js/calendar/moment.js"></script>
    <script src="static/cms/assets/js/daterange/daterangepicker.js"></script>
    <script src="static/cms/assets/js/daterange/daterangepicker_custom.js"></script>
    <script src="static/cms/assets/js/iCheck/custom.min.js"></script>
    <script>window.jQuery || document.write('<script src="static/cms/assets/js/rating/vendor/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="static/cms/assets/js/rating/jquery.barrating.js"></script>
    <script src="static/cms/assets/js/rating/examples.js"></script>
    <script src="static/cms/assets/js/jqueryui/jquery-ui.min.js"></script>
    <script src="static/cms/assets/js/tags/jquery.caret.min.js"></script>
    <script src="static/cms/assets/js/tags/jquery.tag-editor.js"></script>
    <script src="static/cms/assets/js/tags/tag_custom.js"></script>
    <script src="static/cms/assets/js/forms/bootstrap-maxlength.js"></script>
    <script src="static/cms/assets/js/forms/maxlength_custom.js"></script>
    <!-- Theme JS -->
    <script src="static/cms/assets/js/nanoscroller/nanoscroller.js"></script>
    <script src="static/cms/assets/js/custom/theme.js"></script>
    <script src="static/cms/assets/js/custom/utils.js"></script>
</body>
</html>
